<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-08-06 18:01:54
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-08-12 17:32:51
 * @FilePath: \flex-\5 canvas 像素及其操作与画板.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .box {
            width: 1000px;
            height: 800px;
            margin: 30px auto;
            display: flex;
            border: 1px solid;
        }

        #myCanvas {
            margin: auto;
            border: 1px solid;
            height: 750px;
            width: 950px;
            /* image-rendering: pixelated; */
        }
    </style>
</head>

<body>
    <div class="box">
        <canvas id="myCanvas" height="750" width="950" tabindex="333"></canvas>
    </div>
</body>
<script>
    /** @type { HTMLCanvasElement } */
    const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    var scale = window.devicePixelRatio;
    const { width, height } = myCanvas
    myCanvas.width = ~~(width * scale);
    myCanvas.height = ~~(height * scale);

    // 选择区域
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(100, 200)
    ctx.lineTo(150, 200)
    ctx.lineTo(150, 300)
    ctx.lineTo(100, 300)
    ctx.lineTo(100, 200)
    ctx.lineWidth = 3
    ctx.lineJoin = 'round'
    ctx.lineCap = 'round'
    ctx.stroke()
    ctx.closePath();
    ctx.restore();


    function drawImg(ctx, x, y) {
        let imgdata = ctx.createImageData(50, 50)
        for (let i = 0; i < imgdata.data.length; i++) {
            if ((i % 4) === 3) {
                imgdata.data[i] = 255;
                continue;
            }
            imgdata.data[i] = Math.random() * 255; // 红
            imgdata.data[i + 1] = Math.random() * 255; // 绿
            imgdata.data[i + 2] = Math.random() * 255; // 蓝
        };
        ctx.putImageData(imgdata, x, y);
    }

    drawImg(ctx, 80, 80)
    window.addEventListener("resize", (e) => {
        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
        // 确保你在绘图时使用了适当的抗锯齿设置。对于矢量图形或图形绘制，可以使用ctx.imageSmoothingEnabled来控制抗锯齿效果。
        scale = window.devicePixelRatio;
        myCanvas.width = ~~(width * scale);
        myCanvas.height = ~~(height * scale);
        console.log('window.devicePixelRatio :>> ', window.devicePixelRatio);   // 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比
        // 简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(100, 200)
        ctx.lineTo(150, 200)
        ctx.lineTo(150, 300)
        ctx.lineTo(100, 300)
        ctx.lineTo(100, 200)
        ctx.lineWidth = 3
        ctx.lineJoin = 'round'
        ctx.lineCap = 'round'
        ctx.stroke()
        ctx.closePath();
        ctx.restore();
        drawImg(ctx, 80, 80)
    })

</script>

</html>